<!doctype html>  
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	
	<title>Squad - One page Bootstrap 3 Template</title>
	
	<meta name="description" content="">
	<meta name="author" content="iwebstudio">
	<meta name="copyright" content="iwebstudio">
	<meta name="generator" content="Documenter v2.0">
	<meta name="date" content="2014-03-27T00:00:00+01:00">
	
	<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
	<link rel="stylesheet" href="assets/js/google-code-prettify/prettify.css" media="screen">
	<script src="assets/js/google-code-prettify/prettify.js"></script>

	
	
	<script src="assets/js/jquery.js"></script>
	
	<script src="assets/js/jquery.scrollTo.js"></script>
	<script src="assets/js/jquery.easing.js"></script>
	
	<script>document.createElement('section');var duration='500',easing='swing';</script>
	<script src="assets/js/script.js"></script>
	
	<style>
		html{background-color:#FFFFFF;color:#383838;}
		::-moz-selection{background:#444444;color:#DDDDDD;}
		::selection{background:#444444;color:#DDDDDD;}
		#documenter_sidebar #documenter_logo{background-image:url();}
		a{color:#0000FF;}
		.btn {
			border-radius:3px;
		}
		.btn-primary {
			  background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
			  background-image: -ms-linear-gradient(top, #0088CC, #0044CC);
			  background-image: -webkit-gradient(linear, 0 0, 0 0088CC%, from(#DDDDDD), to(#0044CC));
			  background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
			  background-image: -o-linear-gradient(top, #0088CC, #0044CC);
			  background-image: linear-gradient(top, #0088CC, #0044CC);
			  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088CC', endColorstr='#0044CC', GradientType=0);
			  border-color: #0044CC #0044CC #bfbfbf;
			  color:#FFFFFF;
		}
		.btn-primary:hover,
		.btn-primary:active,
		.btn-primary.active,
		.btn-primary.disabled,
		.btn-primary[disabled] {
		  border-color: #0088CC #0088CC #bfbfbf;
		  background-color: #0044CC;
		}
		hr{border-top:1px solid #EBEBEB;border-bottom:1px solid #FFFFFF;}
		#documenter_sidebar, #documenter_sidebar ul a{background-color:#DDDDDD;color:#222222;}
		#documenter_sidebar ul a{-webkit-text-shadow:1px 1px 0px #EEEEEE;-moz-text-shadow:1px 1px 0px #EEEEEE;text-shadow:1px 1px 0px #EEEEEE;}
		#documenter_sidebar ul{border-top:1px solid #AAAAAA;}
		#documenter_sidebar ul a{border-top:1px solid #EEEEEE;border-bottom:1px solid #AAAAAA;color:#444444;}
		#documenter_sidebar ul a:hover{background:#444444;color:#DDDDDD;border-top:1px solid #444444;}
		#documenter_sidebar ul a.current{background:#444444;color:#DDDDDD;border-top:1px solid #444444;}
		#documenter_copyright{display:block !important;visibility:visible !important;}
	</style>
	
</head>
<body class="documenter-project-squad">
	<div id="documenter_sidebar">
		<a href="#documenter_cover" id="documenter_logo"></a>
		<ul id="documenter_nav">
			<li><a class="current" href="#documenter_cover">Start</a></li>
				
			<li><a href="#general" title="General">General</a></li>
			<li><a href="#template_structure" title="Template structure">Template structure</a></li>
			<li><a href="#how_to_preloader" title="How To: Preloader ">How To: Preloader </a></li>
			<li><a href="#how_to_change_the_logo" title="How To: Change the logo">How To: Change the logo</a></li>
			<li><a href="#how_to_change_template_color" title="How To: Change template color">How To: Change template color</a></li>
			<li><a href="#how_to_slider" title="How To: Slider">How To: Slider</a></li>
			<li><a href="#how_to_parallax" title="How To: Parallax">How To: Parallax</a></li>
			<li><a href="#how_to_wow_animation_effect" title="How To: Wow animation effect">How To: Wow animation effect</a></li>
			<li><a href="#source_and_credits" title="Source and credits">Source and credits</a></li>
			<li><a href="#conclusion" title="Conclusion">Conclusion</a></li>

		</ul>
		<div id="documenter_copyright">Copyright iwebstudio 2014<br>
		made with the
		</div>
	</div>
	<div id="documenter_content">
	<section id="documenter_cover">
	<h1>Squad - shared on weidea.net</h1>
	<h2>One page Bootstrap 3 Template</h2>
	<div id="documenter_buttons">
		
	</div>
	<hr>
	<ul>
	<li>created: 03/27/2014</li>
	<li>latest update: 03/27/2014</li>
	<li>by: iwebstudio</li>
	<li><a href=""></a></li>
	
	</ul>
	<p></p>
	</section>
	
	<section id="general">
	<div class="page-header"><h3>General</h3><hr class="notop"></div>
<p>
	Squad is a one page HTML site template built with latest twitter bootstrap 3 and has responsive layout . This template coming with single custom color : &#39;blue&#39; which stored in file &#39;<strong>skin/default.css</strong>&#39; in folder <strong>skin</strong></p>
<p>
	We&#39;ve separated the custom color (blue) in a single file : <strong>default.css</strong> to make you easy to understand and customize or overwrite with your own color/style</p>
<p>
	Since Squad template built with bootstrap so you can go to http://getbootstrap.com/&nbsp; to learn more about twitter boostrap.</p>
<p>
	Since it&#39;s HTML CSS based you can edit all text, content with HTML editor like notepad++ or anykind else. Quite easy for people with basic HTML-CSS knowledge :)</p>
</section>
<section id="template_structure">
	<div class="page-header"><h3>Template structure</h3><hr class="notop"></div>
<p>
	Squad is based on Twitter Bootstrap v3.1 grid system, so there are some additional files included. Please check out :&nbsp;http://getbootstrap.com/.</p>
<p>
	index.html is the core file of the template.&nbsp;</p>
<p>&nbsp;
	</p>
<p>
	<strong>css folder</strong></p>
<p>
	Here you have css files used in this template, bootstrap files and Squad files. In order to corectly customise this template you should edit only style.css file. In this folder you can also find minimised bootstrap files, do not touch them unless you are advanced in html/css.&nbsp;</p>
<p>&nbsp;
	</p>
<p class="p1">
	<strong>js folder</strong></p>
<p>
	Here you can find all additional files used in Squad. Jquery and JavaScript files... I`ll refer to some of them later in this documentation. You propably should not edit most of those files :)</p>
<p>&nbsp;
	</p>
<p>
	<strong>img folder</strong></p>
<p>
	Here are all images used in this template stored.</p>
</section>
<section id="how_to_preloader">
	<div class="page-header"><h3>How To: Preloader </h3><hr class="notop"></div>
<p>
	Squad is equiped with cool preloader with css3 loading animation. After the page loads elements on tha homepage fade in an order. You can change the timing in custom.js file.</p>
<p>&nbsp;
	</p>
<pre class="prettyprint lang-js linenums">
jQuery(window).load(function() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;jQuery(&quot;#preloader&quot;).delay(100).fadeOut(&quot;slow&quot;);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;jQuery(&quot;#load&quot;).delay(100).fadeOut(&quot;slow&quot;);
&nbsp;&nbsp; &nbsp;});</pre>
</section>
<section id="how_to_change_the_logo">
	<div class="page-header"><h3>How To: Change the logo</h3><hr class="notop"></div>
<p>
	If you want to change the logo, the best way is to replace the logo.png file in img folder.</p>
<p>&nbsp;
	</p>
<p>
	You can also change the path for your logo. In index.html file code corresponding to logo looks like this:</p>
<pre class="prettyprint lang-html linenums">
&lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;
&nbsp;&nbsp;&nbsp; &lt;img src=&quot;img/logo.png&quot; alt=&quot;Squad&quot; /&gt;
&nbsp; &lt;/a&gt;</pre>
</section>
<section id="how_to_change_template_color">
	<div class="page-header"><h3>How To: Change template color</h3><hr class="notop"></div>
<p>
	The default color is blue</p>
<pre class="prettyprint lang-css linenums">
#67b0d1</pre>
<p>
	We&#39;ve separated template color in &#39;default.css&#39; file (in folder color) so you don&#39;t need to touch another file to change default blue color.</p>
</section>
<section id="how_to_slider">
	<div class="page-header"><h3>How To: Slider</h3><hr class="notop"></div>
<p>
	Squad uses &quot;Revolution Slider&quot; for the slideshow that displayed on intro section. I&#39;ve included Revolution slider documentation/help file within this package if you want to know more details about revolution slider.</p>
<p>
	All images used on revolution slider item stored in folder &#39;img/slides&#39;</p>
<p>
	Here&#39;s javascript function which handle Revolution slider (in main.js file)</p>
<pre class="prettyprint lang-js linenums">
&nbsp;&nbsp;&nbsp; var revapi;

&nbsp;&nbsp; &nbsp;jQuery(document).ready(function() {

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; revapi = jQuery(&#39;.tp-banner&#39;).revolution(
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;delay:9000,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;startwidth:1170,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;startheight:635,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;hideThumbs:200,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;fullWidth:&quot;on&quot;,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;navigationType:&quot;none&quot;,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;navigationArrows:&quot;solo&quot;,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;navigationStyle:&quot;square&quot;,
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;forceFullWidth:&quot;on&quot;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});

&nbsp;&nbsp; &nbsp;});&nbsp;&nbsp; &nbsp;//ready</pre>
<p>&nbsp;
	</p>
<p>
	Please open Revolution slider help file/documentation for more advanced information about setting &amp; customization</p>
<p>&nbsp;
	</p>
<p>&nbsp;
	</p>
</section>
<section id="how_to_parallax">
	<div class="page-header"><h3>How To: Parallax</h3><hr class="notop"></div>
<p>
	Parallax function uses &#39;jquery stellar script&#39;&nbsp; from http://markdalgleish.com/projects/stellar.js</p>
<p>
	It&#39;s easy when you want to create new parallax section, just like a regular section.. give an unique ID, set background image to the ID and add &#39;Stellar background ratio&#39;</p>
<p>
	<strong>see example below:</strong></p>
<p>
	on HTML</p>
<pre class="prettyprint lang-html linenums">
&lt;section id=&quot;parallax1&quot; class=&quot;home-section parallax text-light&quot; data-stellar-background-ratio=&quot;0.5&quot;&gt;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=&quot;container&quot;&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class=&quot;row&quot;&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class=&quot;col-md-12&quot;&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class=&quot;text-center&quot;&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2 class=&quot;wow bounceInDown&quot; data-wow-delay=&quot;1s&quot;&gt;Details are the key for perfection&lt;/h2&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p class=&quot;lead wow bounceInUp&quot; data-wow-delay=&quot;2s&quot;&gt;We mix all detailed things together&lt;/p&gt;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/section&gt;&nbsp;&nbsp; 
</pre>
<p>&nbsp;
	</p>
<p>
	on CSS set your parallax background image</p>
<p>
	#uniqueID {&nbsp;&nbsp; &nbsp;<br>
	&nbsp;&nbsp; &nbsp;background-image: url(../img/parallax/img1.jpg);<br>
	}</p>
</section>
<section id="how_to_wow_animation_effect">
	<div class="page-header"><h3>How To: Wow animation effect</h3><hr class="notop"></div>
<p>
	Squad uses animation effect from <a href="http://mynameismatthieu.com/WOW/" target="_blank">http://mynameismatthieu.com/WOW/</a></p>
<p>
	From the HTML code you can see some elements using Wow effect, example</p>
<pre class="prettyprint lang-html linenums">
&lt;div class=&quot;wow bounceInDown&quot; data-wow-delay=&quot;0.4s&quot;&gt;
&nbsp;&nbsp; &nbsp; &lt;div class=&quot;section-heading&quot;&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &lt;h2&gt;Our Services&lt;/h2&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;i class=&quot;fa fa-2x fa-angle-down&quot;&gt;&lt;/i&gt;
&nbsp;&nbsp; &nbsp;&nbsp; &lt;p&gt;All Squad crafters use their high level of creativity and imagination to produce emotionally-driven work that yields results.&lt;/p&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt;
&lt;/div&gt;</pre>
<p>
	You can follow tutorial from <a href="http://mynameismatthieu.com/WOW/docs.html" target="_blank">http://mynameismatthieu.com/WOW/docs.html</a> to add effect on any element</p>
<p>&nbsp;
	</p>
<p>&nbsp;
	</p>
</section>
<section id="source_and_credits">
	<div class="page-header"><h3>Source and credits</h3><hr class="notop"></div>
<p>
	We&#39;ve used the following images, icons or other files as listed.</p>
<p>&nbsp;
	</p>
<p>
	<strong>FONTS:</strong></p>
<ol>
	<li>
		Fontawesome - http://fortawesome.github.com/Font-Awesome/</li>
	<li>
		Open sans webfont from <a href="http://www.google.com/fonts" target="_blank">http://www.google.com/fonts</a></li>
</ol>
<p>&nbsp;
	</p>
<p>
	<strong>JAVASCRIPT ,JQUERY PLUGINS &amp; SCRIPTS :</strong></p>
<ol>
	<li>
		Bootstrap 3.1 from <a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a></li>
	<li>
		Revolution slider from themepunch.com</li>
	<li>
		jQuery appear from https://github.com/morr/jquery.appear/</li>
	<li>
		jQuery from<a href="http://%20jquery.com" target="_blank"> jquery.com</a></li>
	<li>
		jQuery easing v.1.3&nbsp; from <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a></li>
</ol>
</section>
<section id="conclusion">
	<div class="page-header"><h3>Conclusion</h3><hr class="notop"></div>
<p>
	Once again, thank you so much for purchasing this template. As we said at the beginning, I&#39;d be glad to help you if you have any questions relating to this template. No guarantees, but we&#39;ll do the best to assist. If you have a more question regarding Squad template,&nbsp; you can drop us message through our profile contact form <a href="https://wrapbootstrap.com/user/iWebstudio" target="_blank">https://wrapbootstrap.com/user/iWebstudio</a></p>
</section>

	</div>
</body>
</html>